<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array.from()</title>
</head>
<body>
    <h1>Array.from() 方法</h1>
    <p>Array.from() 方法用于将以下两类对象转为真正的数组：</p>
    <ul>
        <li>类似数组的对象（array-like object）</li>
        <li>可遍历（iterable）的对象</li>
    </ul>

    <h2>常用场景：</h2>
    <ul>
        <li>将类数组对象（如 NodeList、arguments）转换为真正的数组</li>
        <li>将 Set 和 Map 数据结构转换为真正的数组</li>
        <li>将字符串转换为数组</li>
        <li>接受第二个参数，类似于数组的 map 方法，对每个元素进行处理</li>
        
    </ul>

    <script>
        // 1. 将字符串转换为数组
        console.log('字符串转数组:', Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']

        // 2. 将 Set 结构转换为数组
        const set = new Set(['a', 'b', 'c']);
        console.log('Set转数组:', Array.from(set)); // ['a', 'b', 'c']

        // 3. 将类数组对象转换为数组
        const arrayLike = {
            0: 'a',
            1: 'b',
            2: 'c',
            length: 3
        };
        console.log('类数组转数组:', Array.from(arrayLike)); // ['a', 'b', 'c']

        // 4. 使用第二个参数进行映射转换
        console.log('带映射转换:', Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

        // 5. 生成数字序列
        console.log('生成数字序列:', Array.from({length: 5}, (v, i) => i)); // [0, 1, 2, 3, 4]

        // 6. 获取DOM元素并转换为数组
        const divs = document.getElementsByTagName('li');
        const divsArr = Array.from(divs);
        console.log('NodeList转数组:', divsArr);
    </script>
</body>
<script>
    console.log(Array.from([1,2,3],x=>x*x));
</script>
</html>
